<template>
	<view v-if="catalogList.length>0">
		<view v-for="(item,index) in catalogList" :key='index'>
			<view class="title" @click="toggle(index)">
				<view class="title-content">{{item.title}}</view>
				<image class="title-img" :class="openIndex==index?'title-img-rotate':''" src="/static/course/arrow-round.png"></image>
			</view>
			<view style="overflow: hidden;">
				<view class="collapse-content" :class="openIndex==index?'open':'unopen'" v-for="(secondItem,secondIndex) in item.children"
				 :key='secondIndex'>
					<view class="son" v-if="secondItem.indexType=='0'">{{secondItem.title}}</view>
					<view v-if="secondItem.indexType=='0'">
						<catalog-item v-for="(thirdItem,thirdIndex) in secondItem.children" :item="thirdItem" :isFirst="thirdIndex==0"
						 :isLast="thirdIndex==secondItem.children.length-1" :key='thirdItem.lessonId'>
						</catalog-item>
					</view>
					<catalog-item v-if="secondItem.indexType=='1'" :item="secondItem" :isFirst="secondIndex==0" :isLast="secondIndex==item.children.length-1">
					</catalog-item>

					<view v-if='secondItem.indexType=="2"' class="comment">
						<image class="icon-comment" src="/static/img/tabbar/mine.png"></image>
						<view>{{secondItem.title}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view v-else class="empty">暂无数据</view>
</template>

<script>
	import catalogItem from './catalogItem.vue'
	export default {
		components: {
			catalogItem
		},
		props: {
			catalogList:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				openIndex: 0,
				}
		},
		methods: {
			toggle(index) {
				if (this.openIndex == index) {
					this.openIndex = -1;
					return;
				}
				this.openIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.collapse-content {
		overflow: hidden;
		transition: all .3s
	}

	.title {
		padding-top: 40upx;
		font-size: 28upx;
		color: #333333;
		font-weight: bold;
		display: flex;

		&-content {
			flex: 1;
		}

		&-img {
			width: 28upx;
			height: 28upx;
			transition: all 0.3s;
			&-rotate{
				transform: rotate(180deg);
			}
		}
	}

	.son {
		margin-left: 60upx;
		font-size: 24upx;
		color: #333333;
		line-height: 64upx;
		margin-top: 16upx;
	}



	.open {
		height: auto;
		ocap: 0;
		transform: translateY(0);
	}

	.unopen {
		height: 0px;
		alpha: 1;
		transform: translateY(-50%);
	}

	.comment {
		margin-left: 60upx;
		font-size: 24upx;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.icon-comment {
		width: 20upx;
		height: auto;
		margin-right: 4upx;
	}
	
	.empty {
		margin-top: 60upx;
		text-align: center;
		font-size: 28upx;
		color: #666666;
	}
</style>
